<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      Vue2 与 Vue3 都可以通过
        $root     获取到 根组件实例
        $parent   获取到 父组件实例

      Vue2 还可以通过 $children 获取到 儿子们
      Vue3 中  $children 被移除了的。

     -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
          <div>
            <p>{{ msg }}</p>

            <hr />

            <Hello  />

            <hr />

            <World />
          </div>
        `,

        data() {
          return {
            msg: "root",
          };
        },
      });

      app.component("Hello", {
        template: `
          <div>
            <p>Hello, {{ count }}</p> 
            <button @click="fn1">$parent获取父组件实例</button>
            <button @click="fn2">$root获取根组件实例</button>
          </div>
        `,

        data() {
          return {
            count: 1,
          };
        },

        mounted() {
          console.log(this);
        },

        methods: {
          fn1() {
            console.log("$parent", this.$parent);

            this.$parent.msg += "~";
          },

          fn2() {
            console.log("$root", this.$root);

            this.$root.msg += "!";
          },
        },
      });

      app.component("World", {
        template: `
          <div>
            <p>World</p>
          </div>
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
